Home Explore Help
Register Sign In
jamesperet
/
velvet-design
Watch 1
Star 0
Fork 0

Browse Source
Front page layout

jamesperet 9 years ago
parent
0e24a8731f
commit
695767eb81
10 changed files with 250 additions and 53 deletions
Show Diff Stats
  1. BIN
      app/assets/images/logotipo_velvet.png
  2. BIN
      app/assets/images/post_maison.jpg
  3. BIN
      app/assets/images/thumb_agencia.jpg
  4. BIN
      app/assets/images/thumb_design.jpg
  5. BIN
      app/assets/images/thumb_editora.jpg
  6. 32 2
      app/assets/javascripts/start.js
  7. 124 5
      app/assets/stylesheets/start.css.less
  8. 1 0
      app/controllers/start_controller.rb
  9. 21 8
      app/views/layouts/velvet_layout.html.erb
  10. 72 38
      app/views/start/index.html.erb

BIN
app/assets/images/logotipo_velvet.png
View File


BIN
app/assets/images/post_maison.jpg
View File


BIN
app/assets/images/thumb_agencia.jpg
View File


BIN
app/assets/images/thumb_design.jpg
View File


BIN
app/assets/images/thumb_editora.jpg
View File


+ 32 - 2
app/assets/javascripts/start.js
View File 

@@ -1,7 +1,8 @@
1 1 
 // get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
2 2 
 $( document ).ready(function() {
3 
-	var mainbottom = $('#myCarousel').offset().top + $('#myCarousel').height();
4 
-
3 
+	var mainbottom = $('#myCarousel').offset().top + ($('#myCarousel').height()*2)-10;
4 
+	var about_bottom = $('#post').offset().top +  $('#post-image').height() - (screen.height - $('#post-image').height() + 152);
5 
+	var post_bottom = $('.feature-post-text').offset().top +  $('.feature-post-text').height() - (screen.height - $('.feature-post-text').height() + 232);
5 6
6 7 
 	// on scroll,
7 8 
 	$(window).on('scroll',function(){
 
@@ -15,5 +16,34 @@ $( document ).ready(function() {
15 16 
 	   }
16 17
17 18 
 	});
19 
+
20 
+	// on scroll,
21 
+	$(window).on('scroll',function(){
22 
+
23 
+	    // we round here to reduce a little workload
24 
+	    stop = Math.round($(window).scrollTop());
25 
+	    if (stop > about_bottom) {
26 
+	        $('#post-image').addClass('affix top-affix ');
27 
+	    } else {
28 
+	        $('#post-image').removeClass('affix top-affix ');
29 
+	   }
30 
+
31 
+	});
32 
+
33 
+	// on scroll,
34 
+	$(window).on('scroll',function(){
35 
+
36 
+	    // we round here to reduce a little workload
37 
+	    stop = Math.round($(window).scrollTop());
38 
+	    if (stop > post_bottom && stop > about_bottom) {
39 
+	        $('#post-image').removeClass('affix top-affix ');
40 
+		   var textsize = $('.feature-post-text').height() - $('#post-image').height()/2 - 80
41 
+		   $('#post-image').css('margin-top', textsize);
42 
+	    } else {
43 
+	    		$('#post-image').css('margin-top', '0');
44 
+	    }
45 
+
46 
+	});
47 
+
18 48
19 49 
 });

+ 124 - 5
app/assets/stylesheets/start.css.less
View File 

@@ -2,28 +2,39 @@
2 2 
 // They will automatically be included in application.css.
3 3 
 // You can use Less here: http://lesscss.org/
4 4
5 
+body {
6 
+	max-width:100%;
7 
+}
8 
+
9 
+.navbar .nav {
10 
+	margin-top: 30px;
11 
+}
12 
+
5 13 
 .navbar-inner {
6 
-    background-color :transparent;
14 
+    background-color: rgba(0, 0, 0, 0.75);
7 15 
     color: white;
8 16 
     transition: all 0.25s ease;
9 17 
     border: none;
10 18 
     text-shadow: 0 0 0 #ffffff;
19 
+    max-width:100%;
11 20 
     /* make sure to add vendor prefixes here */
12 21 
 }
13 22
14 23 
 .navbar .nav > li > a {
15 24 
 	text-shadow: 0 0 0 #ffffff;
16 
-	color: white;
25 
+	color: #00A0E3;
26 
+	font-size: 18px;
27 
+	text-transform: uppercase;
17 28 
 }
18 29
19 30 
 .navbar .nav > li > a:hover {
20 31 
 	text-shadow: 0 0 0 #ffffff;
21 32 
 	color: white;
22 
-	text-decoration: underline;
33 
+	//text-decoration: underline;
23 34 
 }
24 35
25 36 
 .navbar-inner.past-main {
26 
-    background-color:#fff;
37 
+    background-color:#202020;
27 38 
     color:#444;
28 39 
 }
29 40 
 
@@ -35,4 +46,112 @@
35 46 
 #below-main {
36 47 
   height:1000px;
37 48 
   background-color:#eee;
38 
-}
49 
+}
50 
+
51 
+h1.header {
52 
+	text-transform: uppercase;
53 
+	color: white;
54 
+	font-size: 72px;
55 
+}
56 
+
57 
+h2.header {
58 
+	text-transform: uppercase;
59 
+	color: #202020;
60 
+	font-size: 60px;
61 
+	text-align: center;
62 
+	font-weight: 100;
63 
+	line-height: 70px;
64 
+}
65 
+
66 
+h4.header {
67 
+	text-transform: uppercase;
68 
+	color: #202020;
69 
+	text-align: center;
70 
+	font-weight: 100;
71 
+	margin-bottom: 20px;
72 
+	margin-top: 100px;
73 
+}
74 
+
75 
+p.header {
76 
+	color: white;
77 
+}
78 
+
79 
+a:hover > .caret {
80 
+display: inline-block;
81 
+width: 0;
82 
+height: 0;
83 
+vertical-align: top;
84 
+border-top: 4px solid #000000;
85 
+border-right: 4px solid transparent;
86 
+border-left: 4px solid transparent;
87 
+content: "";
88 
+margin-top: 8px;
89 
+}
90 
+
91 
+
92 
+.thumb {
93 
+	margin-top: 20px;
94 
+	min-height:100%;
95 
+	background-size: cover;
96 
+	background-repeat: no-repeat;
97 
+	background-position: center center;
98 
+	float: left;
99 
+}
100 
+
101 
+#design {
102 
+	background-image: url(thumb_design.jpg);
103 
+	width: 33%;
104 
+}
105 
+
106 
+#agencia {
107 
+	background-image: url(thumb_agencia.jpg);
108 
+	width: 34%;
109 
+}
110 
+
111 
+#editora {
112 
+	background-image: url(thumb_editora.jpg);
113 
+	width: 33%;
114 
+}
115 
+
116 
+.thumb-text {
117 
+	text-transform: uppercase;
118 
+	color: white;
119 
+	font-size: 60px;
120 
+	text-align: center;
121 
+	margin-top: 35%;
122 
+	font-weight: bold;
123 
+}
124 
+
125 
+.lead-big {
126 
+	font-size: 32px;
127 
+	font-weight: 100;
128 
+	line-height: 40px;
129 
+}
130 
+
131 
+.feature-post-text p {
132 
+	line-height: 1.2;
133 
+}
134 
+
135 
+.top-affix {
136 
+	top: 102px;
137 
+}
138 
+
139 
+.Absolute-Center {
140 
+height: 50%;
141 
+width: 50%;
142 
+overflow: auto;
143 
+margin: auto;
144 
+position: absolute;
145 
+top: 0;
146 
+left: 0;
147 
+bottom: 0;
148 
+right: 0;
149 
+}
150 
+
151 
+.Absolute-Center.is-Responsive {
152 
+width: 60%;
153 
+height: 60%;
154 
+min-width: 200px;
155 
+max-width: 400px;
156 
+padding: 40px;
157 
+}

+ 1 - 0
app/controllers/start_controller.rb
View File 

@@ -4,6 +4,7 @@ class StartController < ApplicationController
4 4
5 5 
   def index
6 6 
     @blog_posts = BlogPost.order('created_at DESC').take(4)
7 
+    @last_post = BlogPost.last
7 8 
   end
8 9
9 10 
 end

+ 21 - 8
app/views/layouts/velvet_layout.html.erb
View File 

@@ -46,14 +46,27 @@
46 46 
             <span class="icon-bar"></span>
47 47 
             <span class="icon-bar"></span>
48 48 
           </a>
49 
-          <a class="brand" href="#">RailsWebsiteTemplate</a>
50 
-          <div class="container nav-collapse">
51 
-            <ul class="nav">
52 
-              <li><%= link_to "Link1", "/path1"  %></li>
53 
-              <li><%= link_to "Link2", "/path2"  %></li>
54 
-              <li><%= link_to "Link3", "/path3"  %></li>
55 
-            </ul>
56 
-          </div><!--/.nav-collapse -->
49 
+          <%= image_tag "logotipo_velvet.png", class: 'brand', style: 'width: 250px;' %>
50 
+
51 
+		<div class="container nav-collapse ">
52 
+		  <ul class="nav pull-right">
53 
+		    <li><%= link_to "Blog", blog_path  %></li>
54 
+		    <li ><%= link_to (t 'contact.contact'), contact_messages_path  %></li>
55 
+			<% if current_user.admin %>
56 
+				<li><%= link_to ('<i class="fa fa-cogs"></i>').html_safe, admin_dashboard_path %></li>
57 
+			<% end %>
58 
+			<% if user_signed_in? %>
59 
+	 			<li><%= link_to ('<i class="fa fa-user"></i>').html_safe, edit_user_registration_path %></li>
60 
+	 			<li><%= link_to ('<i class="fa fa-sign-out"></i>').html_safe, destroy_user_session_path, method: :delete %></li>
61 
+			<% else %>
62 
+				<li><%= link_to ('<i class="fa fa-sign-in"></i>').html_safe, new_user_session_path  %></li>
63 
+				<li><%= link_to (t "nav.signup"), new_user_registration_path  %></li>
64 
+			<% end %>
65 
+
66 
+		</ul>
67 
+
68 
+		</div><!--/.nav-collapse -->
69 
+
57 70 
         </div>
58 71 
       </div>
59 72 
     </div>

+ 72 - 38
app/views/start/index.html.erb
View File 

@@ -10,10 +10,18 @@
10 10 
 	 <div class="carousel-inner" role="listbox">
11 11 
 	   <div class="item active">
12 12 
 	     <%= image_tag "header.jpg", style: 'width: 100%;' %>
13 
-	     <div class="container">
14 
-	       <div class="carousel-caption">
15 
-	         <h1><%= @config.website_name %></h1>
16 
-	         <p><%= @config.tagline %></p>
13 
+	     <div class="container" >
14 
+		  <div class="row">
15 
+			  <div class="span12" style="height: 20px;">
16 
+			       <div class="" style="background-color: transparent; position: relative; top: -500px;">
17 
+
18 
+			         <h1 class="header">Design Conectivo</h1>
19 
+			         <p class="lead header lead-big">
20 
+					    <%= @config.tagline %>
21 
+
22 
+				    </p>
23 
+			    </div>
24 
+		    </div>
17 25 
 	      </div>
18 26 
           </div>
19 27 
 	  </div>
 
@@ -21,53 +29,79 @@
21 29
22 30 
 <div class="container" style="margin-top: 30px;">
23 31 
 	<div class="row">
32 
+
24 33 
 		<div class="span12">
25 
-
26 
-			<div class="page-header">
27 
-			  <h1><%= t 'blog.latest_posts'%> <%= link_to (t 'blog.more_posts'), blog_path, class: 'btn btn-large pull-right' %></h1>
28 
-			</div>
29 
-
30 
-			<ul class="thumbnails">
31 
-			    <% @blog_posts.each do |post| %>
32 
-				   <li class="span3">
33 
-				     <div class="thumbnail" style="height: 300px;">
34 
-					  <% if post.image.file != nil %>
35 
-					  	<%= image_tag post.image.thumb.to_s %>
36 
-					  <% else %>
37 
-				       	<img src="http://placehold.it/300x200" alt="">
38 
-					  <% end %>
39 
-				       <h3><%= link_to post.title, post_path(post) %></h3>
40 
-				       <p><%= post.description %></p>
41 
-				     </div>
42 
-				   </li>
43 
-			    <% end %>
44 
-			</ul>
45 
-
46 34 
 			<div class="page-header">
47 
-			  <h1>Sobre</h1>
35 
+			  <h2 class="header">Sobre nós</h2>
48 36 
 			</div>
49 37
50 
-			<p>Em tempos de conexões, como o nosso, em que as informações chegam à velocidade da luz aos quatro cantos do mundo e que as trocas se intensificam,  irradiando em múltiplos focos, a comunicação deixa de ser matéria exclusiva de um ou dois campos do conhecimento para se tornar plataforma colaborativa entre diversas linguagens.</p>
38 
+			<p class="lead lead-big">Em tempos de conexões, como o nosso, em que as informações chegam à velocidade da luz aos quatro cantos do mundo e que as trocas se intensificam,  irradiando em múltiplos focos, a comunicação deixa de ser matéria exclusiva de um ou dois campos do conhecimento para se tornar plataforma colaborativa entre diversas linguagens.</p>
51 39
52 
-			<p>E, na medida em que a esfera digital se configura como um hub, por onde passam todas as formas de criação, ela coloca novos desafios para a criação, tanto no plano bidimensional quanto no tridimensional - que tende a se tornar cada vez mais experiêncial.</p>
40 
+			<p class="lead">E, na medida em que a esfera digital se configura como um hub, por onde passam todas as formas de criação, ela coloca novos desafios para a criação, tanto no plano bidimensional quanto no tridimensional - que tende a se tornar cada vez mais experiêncial.</p>
53 41
54 
-			<p>A Velvet Design nasce de um profundo afinamento com as dinâmicas da comunicação de nossa época  e, ao mesmo tempo,  da convergência entre duas trajetórias no campo da criação.</p>
42 
+			<p class="lead ">A <b>Velvet Design</b> nasce de um profundo afinamento com as dinâmicas da comunicação de nossa época  e, ao mesmo tempo,  da convergência entre duas trajetórias no campo da criação.</p>
55 43
56 
-			<p>Por um lado, da experiência de anos de trabalho com cenografia e design gráfico, de Roberta Queiroz. Por outro, do percurso consolidado na pintura, nacional e internacionalmente, do artista plástico André Poli. Dessa parceria entre linguagens e da afinidade com o propósito de uma atuação multidisciplinar, surge a Velvet em 2006, com a meta de desenvolver projetos, em diferentes escalas e suportes, que respondam às necessidades específicas de cada cliente.</p>
44 
+			<p class="lead">Por um lado, da experiência de anos de trabalho com cenografia e design gráfico, de <b>Roberta Queiroz</b>. Por outro, do percurso consolidado na pintura, nacional e internacionalmente, do artista plástico <b>André Poli</b>. Dessa parceria entre linguagens e da afinidade com o propósito de uma atuação multidisciplinar, surge a Velvet em 2006, com a meta de desenvolver projetos, em diferentes escalas e suportes, que respondam às necessidades específicas de cada cliente.</p>
57 45
58 
-			<p>Compreendendo o design de uma maneira ampla, a Velvet Design se posiciona como uma agência de criação, comunicação e realização de ideias.</p>
46 
+		</div>
47 
+
48 
+	</div>
49 
+</div>
50 
+<div style="margin-top: 50px;"></div>
51 
+
52 
+	<div id="design" class="thumb"><div class="thumb-text">Design</div></div>
53 
+	<div id="agencia" class="thumb"><div class="thumb-text">Agência</div></div>
54 
+	<div id="editora" class="thumb"><div class="thumb-text">Editora</div></div>
59 55
60 
-			<p>Para nós o design é um princípio que pode se desdobrar em diversas formas e escalas  - da esfera gráfica à ambiental passando pelo objeto - além de contemplar, também, o desenho do processo que envolve desde a concepção até a realização dos projetos formulados.</p>
61 56
62 
-			<p>Nessa direção, a Velvet Design Conectivo assegura aos seus clientes a execução integral dos projetos que desenvolve – operacionalizando todas as etapas de produção - otimizando recursos e garantindo que o produto final seja concluído do modo como fora inicialmente imaginado.</p>
63 57
64 
-			<div class="page-header">
65 
-			  <h1>Contato</h1>
66 
-			</div>
67 
-
68 58
59 
+<div id="about2" class="container">
60 
+	<div class="row" style="margin-top: 80px;">
61 
+		<div class="span12">
62 
+
63 
+			<p class="lead lead-big">Compreendendo o design de uma maneira ampla, a Velvet Design se posiciona como uma agência de criação, comunicação e realização de ideias.</p>
64 
+
65 
+			<p class="lead">Para nós o design é um princípio que pode se desdobrar em diversas formas e escalas  - da esfera gráfica à ambiental passando pelo objeto - além de contemplar, também, o desenho do processo que envolve desde a concepção até a realização dos projetos formulados.</p>
66 
+
67 
+			<p class="lead">Nessa direção, a Velvet Design Conectivo assegura aos seus clientes a execução integral dos projetos que desenvolve – operacionalizando todas as etapas de produção - otimizando recursos e garantindo que o produto final seja concluído do modo como fora inicialmente imaginado.</p>
68 
+		</div>
69 
+
70 
+	</div>
71 
+</div>
69 72
70 
-			<br>
73 
+<div id="post" style="margin-top: 80px; " class="">
74 
+	<div  id="post-image" class="pull-left" style="width: 50%; height: 1000px; overflow: hide;">
75 
+		<%= image_tag "post_maison.jpg", style: 'width: 100%; max-height: 1000px;'%>
76 
+	</div>
77 
+	<div class="pull-right" style="width: 50%; background-color: #F7F7F7;">
78 
+		<div style="padding: 50px; padding-top: 20px; width: 70%">
79 
+			<h4 class="header">Notícias</h4>
80 
+			<h2 class="header" style="margin-bottom: 50px;"><%= @last_post.title.html_safe %></h2>
81 
+			<div class="feature-post-text"><%= @last_post.content.html_safe %></div>
71 82 
 		</div>
72 83 
 	</div>
73 84 
 </div>
85 
+
86 
+<div id="about2" class="container">
87 
+	<div class="row" style="margin-top: 80px;">
88 
+		<div class="span12">
89 
+
90 
+			<p class="lead lead-big">Compreendendo o design de uma maneira ampla, a Velvet Design se posiciona como uma agência de criação, comunicação e realização de ideias.</p>
91 
+
92 
+			<p class="lead">Para nós o design é um princípio que pode se desdobrar em diversas formas e escalas  - da esfera gráfica à ambiental passando pelo objeto - além de contemplar, também, o desenho do processo que envolve desde a concepção até a realização dos projetos formulados.</p>
93 
+
94 
+			<p class="lead">Nessa direção, a Velvet Design Conectivo assegura aos seus clientes a execução integral dos projetos que desenvolve – operacionalizando todas as etapas de produção - otimizando recursos e garantindo que o produto final seja concluído do modo como fora inicialmente imaginado.</p>
95 
+		</div>
96 
+
97 
+	</div>
98 
+</div>
99 
+
100 
+<div class="container" style="backgroun-color: white;">
101 
+	<footer style="margin-top: 100px; height: 80px;">
102 
+	  <hr>
103 
+	  <p style="text-align: center;">&copy; <%= @config.website_name %> <%= Time.now.year %></p>
104 
+	</footer>
105 
+</div>
106 
+
107 
+